<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		#demo ul li img {
			width: 25%
		}
		
		#demo ul {
			padding: 15px;
		}
		
		#demo ul li {
			list-style: none;
			display: inline;
		}
		
		.clear {
			clear: both;
		}
		
		.rotate0 {
			transform: rotate(0);
		}
		
		.rotate90 {
			transform: rotate(90deg);
		}
		
		.rotate180 {
			transform: rotate(180deg);
		}
		
		.rotate270 {
			transform: rotate(270deg);
		}
		
		#button {
			padding: 15px;
		}
		
		#button p {
			color: #009900;
		}
		
		button.success {
			background-color: #F0221C;
			color: white;
			border: none;
			width: 100%;
			height: 40px;
		}
		
		button.failure {
			background-color: #B1B1B1;
			color: white;
			border: none;
			width: 100%;
			height: 40px;
		}
	</style>

	<body>
		<div id="demo">
			<ul>
				<li v-for="(i,index) in imgArr">
					<img :class="{
						rotate0:i.angle==0,
						rotate90:i.angle==90,
						rotate180:i.angle==180,
						rotate270:i.angle==270
					}" v-change-angle="imgArr" :angle="i.angle" :index="index" :src="i.src" />
				</li>
				<!--
					传入的属性值
					angle:默认角度
					index:索引值
					imgArr:图片数组
					src:图片路径
				-->
			</ul>
			<div class="clear"></div>
			<div id="button">
				<p>{{isLogin?"通过验证":"重新验证"}}</p>
				<button @click="login" :disabled="!isLogin" :class="{success:isLogin,failure:!isLogin}">登录</button>
			</div>
		</div>
	</body>
	<script src="js/vue2.js"></script>
	<script>
		new Vue({
			el: "#demo",
			data: {
				imgArr: [{
					src: "img/windiest.jpg",
					angle: 90
				}, {
					src: "img/windiest.jpg",
					angle: 270
				}, {
					src: "img/windiest.jpg",
					angle: 0
				}, {
					src: "img/windiest.jpg",
					angle: 180
				}],
			},
			computed: {
				isLogin: function() {
					console.log("总角度:", this.imgArr[0].angle + this.imgArr[1].angle + this.imgArr[2].angle + this.imgArr[3].angle);
					var sum = this.imgArr[0].angle + this.imgArr[1].angle + this.imgArr[2].angle + this.imgArr[3].angle;
					if(sum) {
						return false
					} else {
						//如果角度为0，则通过
						return true
					}
				}
			},
			directives: {
				changeAngle: {
					bind: function(el, binding) {
						el.addEventListener("click", function(e) {
							//获取图片数组
							console.log(binding.value)
							var imgs = binding.value
								//点解第几张图片
							console.log(el.getAttribute("index"))
							var index = el.getAttribute("index");
							//获取图片默认的角度
							console.log(el.getAttribute("angle"))
							var angle = el.getAttribute("angle");
							console.log(imgs[index].angle)
								//到达360度后变成初始值0度
							if(imgs[index].angle == 270) {
								imgs[index].angle = 0
							} else {
								imgs[index].angle += 90
							}
						})
					}
				}
			},
			methods: {
				login: function() {
					alert("登录成功")
				}
			}
		})
	</script>

</html>
